<template>
  <div>
    <div class="header-sbs" v-show="showAbs">asdasdadaasdasdasdddddddddad </div>
    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle"> 景点详情 </div>
    <!-- 我是表单界面
    <div v-for="(d, index) in list" :key="index" @click="addinfoasdad(d, index)">
      {{ d.id }}
    </div> -->
    <div class="asdihasildhashdoas">
      <div @click="asdasdwddd"> 我是表单界面 </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
      <div ref="infoadw">
        {{ message }}
      </div>
    </div>
  </div>
</template>
<script>
import { Step, Steps } from 'vant';
export default {
  name: 'App',
  components: {
    [Step.name]: Step,
    [Steps.name]: Steps,
  },
  data() {
    return {
      message: 'asdad',
      list: [],
      showAbs: true,
      opacityStyle: {
        opacity: 0,
      },
    };
  },
  // 离开该页面需要移除这个监听的事件
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    asdasdwddd() {
      this.$nextTick(function () {
        console.log(1111);
        this.message = 'asdasdasd';
      });
    },
    handleScroll() {
      const top = document.documentElement.scrollTop;
      // 默认40
      if (top > 20) {
        let opacity = top / 250; // 默认140
        opacity = opacity > 1 ? 1 : opacity;
        this.opacityStyle = { opacity };
        this.showAbs = false;
      } else {
        this.showAbs = true;
      }
    },
    addinfoasdad(e, index) {
      console.log(e, index);
    },
    undate() {
      let a = [11, 22, 33, 44, 54];
      let info = a.map(function (res, index, a) {
        if (res == 11) {
          return (res = 2);
        }
        return res;
      });
      console.log('我是map出来的值', info);
    },
    // 对于比较鬼的数组处理方案
    Mesage() {
      let a = [
        { name: 'infoaasdasda,   ||1', sdadw: 'pppppppssss', ubfoasdasdw: 'qdasdasdasd' },
        { name: 'infoaasdasda,   ||2', sdadw: 'ppppppp', ubfoasdasdw: 'qdasdasdasd' },
      ];
      // 利用循环新建键值对来完成这个处理，但是还可以用到map来便利出一个新数组
      for (let i in a) {
        a[i].time = a[i].name.split('||')[0].replace(/,/g, '').trim();
        a[i].showinfo = a[i].name.split('||')[1];
      }
      console.log(a);
    },

    // 正对两个一维数组来组成一个新的键值对象
    Arrobj() {
      let a = ['w', 's', 'x'];
      let c = [1, 2, 3];
      let s = {};
      // 第一种利用直白的for循环来完成
      for (let i = 0; i < a.length; i++) {
        s[a[i]] = c[i];
      }
      // 第二种就是利用map的函数映射，遍历出来新数组的方式
      a.map((res, index) => {
        s[a[index]] = c[index];
        return s;
      });
      console.log(s);
    },

    // 一些比较麻烦的数组应答
    quertinfo() {
      let that = this;
      let array = [{ 50026460: '孕产妇营养品' }, { 50022517: '孕妇装/孕产妇用品/营养' }, { 50022517: '孕妇装/孕产妇用品/营养' }, { 50026460: '孕产妇营养品' }, { 50022517: '孕妇装/孕产妇用品/营养' }, { 50022517: '孕妇装/孕产妇用品/营养' }];
      array = array.map(function (res, index) {
        let item = array[index];
        let aaad = Object.keys(item);
        let aaads = { ...aaad };
        return that.list.push({ id: aaads[0], name: item[aaad] });
      });
      console.log(that.list);
      // this.list = array;
      // console.log(array);
      // for (let i = 0; i < array.length; i++) {
      //   let item = array[i];
      //   let aaa = Object.keys(item);
      //   console.log(item[aaa]);
      // }
    },

    // 针对于indexof是否存在于数组中
    queinfoindexof() {
      let arr = [23, 45, 312, 3213, 53, 23];
      // 方法一
      arr = arr.filter(function (res, index) {
        return arr.indexOf(res) === index;
      });
      // 方法二
      // Array.from(new set(arr));
      console.log(arr);
    },
  },
  activated() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  created() {
    window.removeEventListener('scroll', this.handleScroll);

    this.queinfoindexof();
    this.quertinfo();
    this.Mesage();
    this.Arrobj();
  },
};
</script>
<style scoped>
#searchBar {
  margin-top: 20px;
}
.header-sbs {
  display: flex;
  position: fixed;
  top: 0px;
  justify-content: center;
  width: 100%;
}
.header-sbs .header-abs-back {
  color: #fff;
  font-size: 0.4rem;
}
.header-fixed {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*overflow: hidden;*/
  text-align: center;
  color: #fff;
  height: 0.86rem;
  line-height: 0.8rem;
  background: #25a4bb;
  font-size: 0.32rem;
}
.header-fixe .header-fixed-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.64rem;
  font-size: 0.4rem;
  text-align: center;
  color: #ffffff;
}
.asdihasildhashdoas {
  margin-top: 50px;
}
</style>
